<template>
    <div class="main">
        <van-tabs v-model="active1">
            <van-tab title="标签 1" v-for="(item, index) in list" :key="index">
                <template #title class="popular">
                    <img :src="item.img" alt="图片描述" @click="toggleContents">
                    <div>{{ item.title }}</div>
                </template>
                <div v-show="showContent">
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(itemx, i) in item.price" :key="i">
                            <van-image :src="itemx" @click="ToHotel" />
                        </van-grid-item>

                    </van-grid>
                    <van-grid square>
                        <van-grid-item v-for="(items, inde) in item.dest" :key="inde" :text="items" class="listq"
                            @click="ToHotel" />




                    </van-grid>
                </div>
            </van-tab>
        </van-tabs>


        <van-tabs v-model="active2">
            <van-tab title="标签 1" v-for="(item, index) in lists" :key="index">
                <template #title class="popular">
                    <img :src="item.img" alt="图片描述" @click="toggleContent">
                    <div>{{ item.title }}</div>
                </template>
                <div v-show="showContents">
                    <van-grid :border="false" :column-num="3">
                        <van-grid-item v-for="(item, i) in item.price" :key="i">
                            <van-image :src="item" @click="ToHotel" />
                        </van-grid-item>

                    </van-grid>
                    <van-grid square>
                        <van-grid-item v-for="(items, inde) in item.dest" :key="inde" :text="items" class="listq"
                            @click="ToHotel" />
                    </van-grid>
                </div>
            </van-tab>
        </van-tabs>

    </div>
</template>

<script>
import { funget, fungets,  } from '@/api/guo/ferrMain'
// import FreeMains from './FreeMains.vue';
export default {
    data() {
        return {
            active1: '',
            active2: '',
            list: [],//上半部分图标
            lists: [],//上半部分图标
            showContent: true,// 添加一个变量用于控制内容的显示状态（上）
            showContents: false, // 添加一个变量用于控制内容的显示状态（下）



        };
    },


    components: {},

    mounted() {
        this.fungetapi()
        this.fungetapis()


    },
    methods: {
        async fungetapi() {//上半部分图标
            let { data } = await funget()
            // console.log(data)
            this.list = data

        },
        async fungetapis() {//下半部分图标
            let { data } = await fungets()
            // console.log(data)

            this.lists = data
        },
        toggleContent() {//点击下面的图标，显示下面的内容，隐藏上面的
            this.showContent = false;
            this.showContents = true;
        },
        toggleContents() {//点击上面的图标，显示上面的内容，隐藏下面的
            this.showContent = true;
            this.showContents = false;
        },
        ToHotel() {
            this.$router.push({ path: "/HotelList" })
        },



    }
}
</script>

<style scoped lang="scss">
.main {
    background: url("https://s.qunarzz.com/vacation_react/c2b/few_bg.png");
    padding: 10px;
    background-repeat: no-repeat;
    background-size: 100% 250px;

    ::v-deep .van-tabs__wrap {
        height: 80px;
    }

    ::v-deep .van-tab__text--ellipsis {
        display: block;
    }

    ::v-deep .van-tab__text--ellipsis>img {
        height: 40px;
    }

    ::v-deep .listq {
        height: 40px !important;
        padding: 0 10px !important;
    }

    ::v-deep .van-tabs__line {
        width: 10px;
        height: 10px;
        background-color: #b6b29f;
        ;
        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    }

}
</style>